<!--
 * @Author: liaoxing
 * @Date: 2021-11-24 10:10:52
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-11 09:47:19
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\task\index.vue
-->
<template>
  <div class="taskIndex flex">
    <aside>
      <el-menu default-active="0" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="0">
          <i class="el-icon-s-finance" style="margin: 0 20px 0 10px"></i>
          <span>全部任务</span>
        </el-menu-item>
        <el-menu-item index="1">
          <i class="el-icon-s-order" style="margin: 0 20px 0 10px"></i>
          <span>待办任务</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-s-claim" style="margin: 0 20px 0 10px"></i>
          <span>已办任务</span>
        </el-menu-item>
      </el-menu>
    </aside>
    <main>
      <header class="flex-align-center">
        <el-form
          :inline="true"
          :model="searchValue"
          label-width="60px"
          class="flex-align-center"
          size="mini"
        >
          <el-form-item label="标题">
            <el-input v-model="searchValue.title_like" placeholder="标题"></el-input>
          </el-form-item>
          <!-- <el-form-item label="创建人">
            <el-input v-model="searchValue.creator_like" placeholder="创建人"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="getUpcomingTask">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button
          class="absolute"
          style="right: 16px; top: 26px"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="dialogVisible = true"
        >新建流程</el-button>
      </header>
      <el-table
        v-loading="loading"
        :data="dataList"
        border
        stripe
        style="width: 100%;"
        height="700"
      >
        <el-table-column type="index" label="序号" :align="'center'" width="50"></el-table-column>
        <el-table-column prop="title" label="标题" :align="'center'" width="260"></el-table-column>
        <el-table-column prop="name" label="编号" :align="'center'"></el-table-column>
        <el-table-column prop="creator" label="创建人" :align="'center'">
          <template slot-scope="scope">{{ (scope.row.creator ? (scope.row.creator.name || '--') : '--') }}</template>
        </el-table-column>
        <el-table-column prop="created" label="创建时间" :align="'center'"></el-table-column>
        <el-table-column prop="target" label="归属类型" :align="'center'">
          <template slot-scope="scope">{{ tagetName[scope.row.target] }}</template>
        </el-table-column>
        <el-table-column prop="targetType" label="任务类型" :align="'center'">
          <template slot-scope="scope">{{ tagetName[scope.row.targetType] }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" :align="'center'">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="danger">待处理</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="success">已处理</el-tag>
            <el-tag v-else type="info">暂存中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" :align="'center'">
          <template slot-scope="scope">
            <span class="jstarfont finger color-blue" @click="handleItem(scope.row)">
              {{scope.row.status == 1 ? "处理" : "查看"}}
            </span>
            <!-- <el-popconfirm
              style="margin-left: 10px"
              title="确定删除该任务吗？"
            >
              <el-button slot="reference">删除</el-button>
            </el-popconfirm>-->
            <!-- <span class="jstarfont finger color-blue"  @click="deleteItem(scope.row.id)">删除</span> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        :page-size="ps"
        layout="total, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </main>
    <el-dialog title="选择新建类型" :visible.sync="dialogVisible" width="840px">
      <ul class="navListBox">
        <li
          v-for="item in createNavList"
          :key="item.iconName"
          class="finger"
          @click="addProgress(item.link)"
        >
          <div class="flex-center">
            <i :class="item.iconName"></i>
          </div>
          <div class="flex-center">{{ item.name }}</div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/api/task/index'
export default {
  name: 'task',
  components: {},
  data() {
    return {
      loading: false,
      dataList: [],
      searchValue: {
        form: '',
        // creator_like: '',
        status: '',
        title_like: ""
      },
      pn: 1,
      ps: 10,
      totalSize: 0,
      dialogVisible: false,
      createNavList: [
        {
          name: '添加客户需求',
          iconName: 'el-icon-folder-add',
          link: '/business/quote/addDemand',
          // link: '/task/operate/addDemand'
        },
        // {name: "采购报价", iconName: "el-icon-document"},
        // {name: "工程报价", iconName: "el-icon-tickets"}
      ],
      tagetName: {
        CostQuote: '报价单',
        engineer: '工程报价',
        purchaser: '采购报价',
      },
    }
  },
  computed: {},
  created() {
    this.getUpcomingTask()
  },
  watch: {
    pn() {
      this.getUpcomingTask()
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      if (key * 1) {
        this.searchValue.status = key * 1
      } else {
        this.searchValue.status = ''
      }
      this.getUpcomingTask()
    },
    getUpcomingTask() {
      let params = JSON.parse(JSON.stringify(this.searchValue))
      params.pn = this.pn
      params.ps = this.ps
      return new Promise((resolve) => {
        request
          .getUpcomingTask(params)
          .then((res) => {
            if (res.code == 200) {
              this.dataList = res.data.rows
              this.totalSize = res.data.total * 1
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    addProgress(path) {
      console.log(path)
      this.$router.push({ path: path })
    },
    handleItem(item) {
      let path = ''
      /* 工程报价 */
      if (item.target == 'CostQuote') {
        /* 工程 */
        if (item.targetType == 'engineer') {
          path = '/business/quote/quoteProject'
        }
        /* 采购 */
        if (item.targetType == 'purchaser') {
          path = '/business/quote/purchaserProject'
        }
      }
      this.$router.push({
        path: path,
        query: { id: item.id },
      })
    },
    deleteItem(id) {
      return new Promise((resolve) => {
        request
          .deleteUpcomingTask(id)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功!')
            } else {
              this.$message.error(res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.taskIndex {
  height: calc(100vh - 85px);
  width: 100%;
  box-sizing: border-box;
  // padding: 16px;
  aside {
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 16px 0;
    background-color: unset;
    box-shadow: 0 0 2px 2px gainsboro;
    .el-menu {
      border: unset;
    }
  }
  main {
    flex: 1;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    header {
      height: 60px;
    }
  }
  .navListBox {
    height: 400px;
    width: 840px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    li {
      float: left;
      list-style: none;
      width: 140px;
      height: 140px;
      margin: 10px;
      border-radius: 4px;
      & > div:nth-child(1) {
        height: 110px;
        font-size: 50px;
      }
      & > div:nth-child(2) {
        height: 30px;
        line-height: 30px;
      }
      &:hover {
        background-color: rgb(243, 243, 243);
      }
    }
  }
}
</style>